const path =require('path')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
const ESLintPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require("copy-webpack-plugin")


module.exports = {
    entry:path.resolve(__dirname,'../src/index.js'),
    output:{
        path:path.resolve(__dirname,'../build'),
        filename:'./js/bundle.js'
    },
    optimization: {
      minimizer: [
        new CssMinimizerPlugin(),
      ],
      minimize: true,
    },
    module: {
        rules: [{
          /* 
            test:后边配置的是一个正则表达式,用来匹配文件名是否符合当前loader的条件
          */
          test: /\.css$/i,
          /* 
            css-loader:为了识别css类型文件进行打包
            style-loader:js把样式放在style标签中,并插入到页面中
            use后如果是一个数组,则是从后向前一致加载
          */
          use: [MiniCssExtractPlugin.loader, "css-loader"],
        }, {
          /* 
            test:后边配置的是一个正则表达式,用来匹配文件名是否符合当前loader的条件
          */
          test: /\.less$/i,
          /* 
            less-loader:识别less文件类型
            css-loader:为了识别css类型文件进行打包
            style-loader:js把样式放在style标签中,并插入到页面中
            use后如果是一个数组,则是从后向前一致加载
          */
          // use: ["style-loader", "css-loader", "less-loader"],
          use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
        },{
          test: /\.(png|jpg|gif|svg)$/,
          //asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。代替之前的url-loader和file-loader
          type: "asset",
          parser: {
              dataUrlCondition: {
                  maxSize: 30 * 1024, // 小于15kb以下的图片会被打包成base64格式
              },
          },
          generator: {
              filename: 'images/[name][ext]'
          }
      }],
      },
    //插件的配置
  plugins: [new MiniCssExtractPlugin({
    filename: "./css/main.css"
  }),new ESLintPlugin({
    fix: true
  }),new HtmlWebpackPlugin({
    filename: "index.html",
    template: path.resolve(__dirname,'../public/index.html') ,
    minify: {
      collapseWhitespace: true,
      keepClosingSlash: true,
      removeComments: true,
      removeRedundantAttributes: true,
      removeScriptTypeAttributes: true,
      removeStyleLinkTypeAttributes: true,
      useShortDoctype: true
    }
  }),new CopyWebpackPlugin({
    patterns: [{
        from: path.resolve(__dirname, "../public"),
        to: "public",
        globOptions: {
          ignore: ["**/index.html"]
        }
    }],
}),],

  //模式
  mode: "production"
}